<template>
    <view class="calendar">
        <view class="calendar-header">
            <view class="header-left">
                <text>{{ currentYear }}/{{ currentMonth<9?`0${currentMonth}`:currentMonth }}</text>
            </view>
            <view class="header-right">
                <view class="arrow tn-icon-left-circle" @click="changeMonth(-1)"></view>
                <view class="arrow tn-icon-right-circle" @click="changeMonth(1)"></view>
                
            </view>
        </view>
        <view class="calendar-weeks">
            <text v-for="week in weeks" :key="week" class="week-item">{{ week }}</text>
        </view>
        <view class="calendar-days">
            <calendar-item
                v-for="(day, index) in days"
                :key="index"
                :day="day"
                @tap="handleDayClick(day, records[day.fullDate])"
                :data="records[day.fullDate]"
                :last="records[day.fullDate] ? records[records[day.fullDate].prev_date] : undefined"
            ></calendar-item>
        </view>
    </view>
</template>

<script>
import { arrayToObject,formatDate } from '@/store/utils';
export default {
    name: 'Calendar',
    props: ['data'],
    data() {
        return {
            currentYear: new Date().getFullYear(),
            currentMonth: new Date().getMonth() + 1,
            weeks: ['日', '一', '二', '三', '四', '五', '六'],
            days: [],
            today: new Date().toISOString().split('T')[0]
        };
    },

    created() {
        this.initCalendar();
    },
    computed: {
        records() {
            var data = arrayToObject(this.data, 'full_date');
            return data;
        }
    },
    methods: {
        formatDate,
        handleDayClick(day, data) {
            if(day.currentMonth){
                this.$emit('select', day, data);
            }
           
        },
        initCalendar() {
            const firstDay = new Date(this.currentYear, this.currentMonth - 1, 1);
            const lastDay = new Date(this.currentYear, this.currentMonth, 0);
            const days = [];

            // 填充上个月的日期
            const prevMonthDays = firstDay.getDay();
            const prevLastDay = new Date(this.currentYear, this.currentMonth - 1, 0).getDate();
            const prevMonth = this.currentMonth - 1 === 0 ? 12 : this.currentMonth - 1;
            const prevYear = this.currentMonth - 1 === 0 ? this.currentYear - 1 : this.currentYear;
            for (let i = prevMonthDays - 1; i >= 0; i--) {
                days.push({
                    day: prevLastDay - i,
                    currentMonth: false,
                    lunar: '初九', // 这里需要集成农历转换库
                    hasRecord: false,
                    fullDate: `${prevYear}-${String(prevMonth).padStart(2, '0')}-${String(prevLastDay - i).padStart(2, '0')}`
                });
            }

            // 填充当前月的日期
            for (let i = 1; i <= lastDay.getDate(); i++) {
                const currentDate = `${this.currentYear}-${String(this.currentMonth).padStart(2, '0')}-${String(i).padStart(2, '0')}`;
                const record = this.records[currentDate];
                days.push({
                    day: i,
                    currentMonth: true,
                    lunar: '初十', // 这里需要集成农历转换库
                    hasRecord: !!record,
                    recordContent: record?.content,
                    trend: record?.trend,
                    fullDate: currentDate
                });
            }

            // 填充下个月的日期
            const nextMonthDays = 35 - days.length;
            const nextMonth = this.currentMonth + 1 === 13 ? 1 : this.currentMonth + 1;
            const nextYear = this.currentMonth + 1 === 13 ? this.currentYear + 1 : this.currentYear;
            for (let i = 1; i <= nextMonthDays; i++) {
                days.push({
                    day: i,
                    currentMonth: false,
                    lunar: '初一', // 这里需要集成农历转换库
                    hasRecord: false,
                    fullDate: `${nextYear}-${String(nextMonth).padStart(2, '0')}-${String(i).padStart(2, '0')}`
                });
            }

            this.days = days;
            this.$emit('change', this.currentYear, this.currentMonth);
        },
        changeMonth(offset) {
            let newMonth = this.currentMonth + offset;
            let newYear = this.currentYear;

            if (newMonth > 12) {
                newMonth = 1;
                newYear++;
            } else if (newMonth < 1) {
                newMonth = 12;
                newYear--;
            }

            this.currentMonth = newMonth;
            this.currentYear = newYear;
            this.initCalendar();
            this.$emit('change', this.currentYear, this.currentMonth);
        }
    }
};
</script>

<style lang="scss" scoped>
.calendar {
    padding: 0 18rpx;
    .calendar-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
        .header-left {
            font-size: 48rpx;
        }
        .header-right {
            display: flex;
            gap: 20px;

            .arrow {
                cursor: pointer;
                padding: 0 8rpx;
                font-size: 36rpx;
                color:$brand-color;
            }
        }
    }

    .calendar-weeks {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        margin-bottom: 24rpx;
        margin-top: 24rpx;
        .week-item {
            text-align: center;
            font-size: 28rpx;
        }
    }

    .calendar-days {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
        gap: 10rpx;
    }
}
</style>
